@page "/Organization/Overview"

@inject IDataService DataService

<Page Title="@_title">
    <div class="overflow-hidden bg-white shadow sm:rounded-md">
        <ul role="list" class="divide-y divide-gray-200">
            @if (_applications != null)
            {
                @foreach (var app in _applications)
                {
                    <li id="@app.ListItemIdentifier">
                        <a href="@app.Url" class="block hover:bg-gray-50">
                            <div class="flex items-center px-4 py-4 sm:px-6">
                                <div class="flex min-w-0 flex-1 items-center">
                                    <div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
                                        <div>
                                            <p id="@app.NameIdentifier" class="truncate text-sm font-medium text-primary-500 flex items-center">
                                                @app.Name (<UsersIcon Class="h-6 w-6" /> @app.Users)
                                            </p>
                                            <p id="@app.DescriptionIdentifier" class="mt-2 flex items-center text-sm text-gray-500">
                                                <span class="truncate">@app.Description</span>
                                            </p>
                                        </div>
                                        <div class="hidden md:block">
                                            <div>
                                                <p id="@app.CreatedAtIdentifier" class="text-sm text-gray-900">
                                                    Created: <LocalDateTime Value="@app.CreatedAt" />
                                                </p>
                                                <p class="mt-2 flex items-center text-sm text-gray-500">
                                                    App Id: @app.Id
                                                </p>
                                                @if (app.DeleteAt.HasValue)
                                                {
                                                    <p id="@app.DeleteAtIdentifier" class="mt-2 text-sm text-red-900">
                                                        Being deleted at: <LocalDateTime Value="@app.DeleteAt.Value" />
                                                    </p>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </li>
                }
            }
        </ul>
    </div>

    @if (_canCreateApplication != null)
    {
        @if (_canCreateApplication.Value)
        {
            <a id="create-application-btn" href="/Organization/CreateApplication" class="btn-primary max-w-fit">Create Application</a>
        }
        else
        {
            <LinkAlert
                id="upgrade-organization-alert"
                LinkText="Upgrade"
                LinkUrl="/billing/manage"
                Message="You need to upgrade to a paid organization to create more applications."
                Style="@ContextualStyles.Danger" />
        }
    }
</Page>